<template>
  <div id="onGoRegistered">
    <van-row>
      <van-col span="24">
        <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24" style="margin-top: 80px;">
        <van-form>
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.username" name="用户名" label="用户名" placeholder="用户名" :rules="rules.username" />
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.password" type="password" name="密码" label="密码" placeholder="密码" :rules="rules.password" />
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.mobile" name="手机号码" label="手机号码" placeholder="手机号码" :rules="rules.mobile" />
          <van-field style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-model="from.sms" center label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
              <van-button size="small" type="primary" @click="onGetMsm">发送验证码</van-button>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" @click="onSubmit">注册</van-button>
          </div>
        </van-form>
      </van-col>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-loading color="#1989fa" />
          </div>
        </div>
      </van-overlay>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      show: false,
      from: {
        username: '',
        password: '',
        mobile: '',
        code: '123456'
      },
      rules: {
        username: [{ required: true, message: '请填写用户名' }],
        password: [{ required: true, message: '请填写密码' }],
        mobile: [{ required: true, message: '请填写密码' }]
      }
    }
  },
  methods: {
    onSubmit() {
      // this.show = true
      // setTimeout(() => {
      //   //需要定时执行的代码
      //   this.show = false
      // }, 2000)
      this.$post('/auth/register', this.from)
        .then(result => {
          Toast.loading({
            message: '加载中...',
            forbidClick: true
          })
          if (result.data.errno == 0) {
            Toast.success('注册成功!!')
          }
          if (result.data.errno == 704) {
            Toast.fail('用户名已存在!!')
          }
        })
        .catch(err => {})
    },
    onGetMsm() {
      setTimeout(() => {
        //需要定时执行的代码
        this.from.sms = '123456'
      }, 1000)
    },
    onClickLeft() {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
